<template lang="html">
  <div class="dynamic-container">
    <div class="content">
      <dl v-for="(item,index) in data" @click="toDetail(item.id)">
        <dt>
          <!-- 切换展示的默认图片开始 -->
          <div v-if="item.files">
            <img :src="_filterObj(item.files)" :lazy="lazyImage">
          </div>
          <div v-else>
            <img :src="imgUrl" alt="">
          </div>
          <!-- 切换展示的默认图片结束 -->
          <div class="time">
            <span>{{item.createdAt | timeFormat}}</span>
          </div>
        </dt>
        <dd>
          <h3>{{item.title}}</h3>
          <div>
            <p v-html="$options.filters.deleteImgSting(item.content)" class="ellipsis"></p>
          </div>
        </dd>
      </dl>
    </div>
    <div class="block">
      <el-pagination
        layout="prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {getGroupData} from 'api/article.js'

import {filterObj} from 'common/js/filterObj.js'

export default {
  data() {
    return {
      imgUrl: require('./banner.jpg'),
      data: [],
      total: 0,
      totalData: [],
      currentPage: 0,
      lazyImage: require('./new.png')
    }
  },
  created() {
    let zone = this.$route.params.zone
    if (zone) {
      this._getGroupData(zone)
    } else {
      this._getGroupData('zixun')
    }
  },
  methods: {
    _getGroupData(tag) {
      getGroupData(tag).then((res) => {
        this.total = res.data.length
        this.totalData = res.data
        this.data = res.data.slice(this.currentPage, 10)
      })
    },
    toDetail(id) {
      this.$router.push('/index/dynamic-detail/' + id)
    },
    handleCurrentChange(val) {
      this.currentPage = val - 1
    },
    _filterObj(obj) {
      return filterObj(obj)[0].url
    }
  },
  watch: {
    currentPage(newVal) {
      this.data = this.totalData.slice(newVal * 10, (newVal + 1) * 10)
    }
  }
}
</script>

<style lang="scss">
@import "~common/sass/mixin.scss";

.dynamic-container{
  width: 1200px;
  margin:0 auto;
  //border-top: 1px dashed #20a0ff;
  .content{
    margin-top: 50px;
    dl{
      width: 100%;
      display: flex;
      border-bottom: 1px dashed #e2dcd7;
      margin-bottom: 20px;
     // padding-bottom: 20px;
     cursor: pointer;
      dt{
        .bgImg{
          width: 60px;
          height: 60px;
          background-position: center;
          background-size: cover;
        }
        img{
          width: 70px;
          height: 70px;
        }
        .time{
          width: 70px;
          height: 26px;
          background: #198ede;
          text-align: center;
          line-height: 26px;
          span{
            font-size: 12px;
            font-family: '华文宋体';
            margin-top: 10px;
            color: #fff;
          }
        }
        margin-right: 15px;
        padding-bottom: 20px;

      }
      dd{
        h3{
          font-size: 20px;
          line-height: 40px;
        }
       div{
         p{
           font-size: 16px;
           margin-top: 15px;
           color: #373737;
           line-height: 24px;
         }
       }
      }
    }
  }
}
.ellipsis{
  @include ellipsis(2);
}
.block{
  text-align: center;
}
</style>
